<template>
  <div class="about">
    <!-- tab切换 -->
    <div class="content">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="校园招聘" name="first">
          <div class="relation-img">
            <img src="../../assets/invite/组 5 (2).png" alt />
          </div>
          <div class="interview">
            <div class="box">
              <div class="top">
                <img src="../../assets/invite/组 94.png" alt />
                <span>简历投递</span>
              </div>
              <div class="bottom">
                <span></span>
                <span>线上投递</span>
              </div>
              <div class="bottom">
                <span></span>
                <span>线下投递</span>
              </div>
            </div>
            <div class="box">
              <div class="top">
                <img src="../../assets/invite/组 159.png" alt />
                <span>面试安排</span>
              </div>
              <div class="bottom">
                <span></span>
                <span>5分钟面试</span>
              </div>
              <div class="bottom">
                <span></span>
                <span>吴领导人员</span>
              </div>
              <div class="bottom">
                <span></span>
                <span>结构化面试+人才测评</span>
              </div>
            </div>
            <div class="box">
              <div class="top">
                <img src="../../assets/invite/组 160.png" alt />
                <span>offer发放</span>
              </div>
              <div class="bottom">
                <span></span>
                <span>通过面试后我们将以邮件或短信的形式发送确认信息，由专人定向沟通offer信息请保持通讯畅通</span>
              </div>
            </div>
            <div class="box">
              <div class="top">
                <img src="../../assets/invite/组 161.png" alt />
                <span>加入聚选，梦想开始</span>
              </div>
              <div class="bottom">
                <span></span>
                <span>按照约定的时间入职</span>
              </div>
              <div class="bottom">
                <span></span>
                <span>领取办公用品</span>
              </div>
            </div>
          </div>
          <div class="relation-img" style="margin-top:1rem">
            <img src="../../assets/invite/组 117.png" alt />
          </div>
          <div class="post">
            <el-dropdown>
              <el-button type="primary">
                招聘岗位
                <i class="el-icon-caret-bottom"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item>双皮奶</el-dropdown-item>
                <el-dropdown-item>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown @click="handleClick2">
              <el-button type="primary">
                工作地点
                <i class="el-icon-caret-bottom"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item>双皮奶</el-dropdown-item>
                <el-dropdown-item>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown @click="handleClick2">
              <el-button type="primary">
                职位搜索
                <i class="el-icon-caret-bottom"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item>双皮奶</el-dropdown-item>
                <el-dropdown-item>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <!-- 表格 -->
          <el-table
            :data="tableData"
            border
            style="width: 98%;"
            :header-cell-style="{background:'#FF7200',color:'#ffffff'}"
          >
            <el-table-column prop="date" label="招聘岗位" ></el-table-column>
            <el-table-column prop="date" label="岗位类别"></el-table-column>
            <el-table-column prop="name" label="学历要求" ></el-table-column>
            <el-table-column prop="address" label="工作地点"></el-table-column>
          </el-table>
          <div class="relation">
            <div class="relation-box">
              <div class="relation-box-left">
                <img style="width:0.46rem;height:0.36rem" src="../../assets/invite/组 130.png" alt />
              </div>
              <div class="relation-box-right">
                <span>投递邮箱：</span>
                <span>123456789@163.com</span>
              </div>
            </div>
            <div class="relation-box">
              <div class="relation-box-left">
                <img style="width:0.36rem;height:0.51rem" src="../../assets/invite/组 133.png" alt />
              </div>
              <div class="relation-box-right">
                <span>公司地址：</span>
                <span>成都市武侯区中海国际A座1303</span>
              </div>
            </div>
            <div class="relation-box">
              <div class="relation-box-left">
                <img style="width:0.46rem;height:0.46rem" src="../../assets/invite/组 134.png" alt />
              </div>
              <div class="relation-box-right">
                <span>联系电话：</span>
                <span>028-85179775</span>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="社会招聘" name="second">
            <div class="relation-img">
              <img src="../../assets/invite/组 5 (3).png" alt />
            </div>
          <div class="society">
              <div class="society-left">
                  <div class="society-left-box">热招岗位</div>
                  <div class="society-left-box">工作地点</div>
                  <div class="society-left-box">热招职位</div>
              </div>
              <div class="society-right">
                  <div class="society-right-box">
                    <div>全部</div>
                    <div><span>成都</span></div>
                  </div>
                  <div class="society-right-box">
                    <div>全部</div>
                    <div><span>财务类</span><span>市场类</span><span>技术类</span><span>人力资源类</span></div>
                  </div>
                  <div class="society-right-box">
                    <div>全部</div>
                    <div><span>税务经理</span><span>人事专员</span><span>品质经理</span></div>
                  </div>
              </div>
          </div>
           <!-- 表格 -->
          <el-table
            :data="tableData"
            border
            style="width: 98%;"
            :header-cell-style="{background:'#FF7200',color:'#ffffff'}"
          >
            <el-table-column prop="date" label="招聘岗位" ></el-table-column>
            <el-table-column prop="date" label="岗位类别" ></el-table-column>
            <el-table-column prop="name" label="学历要求" ></el-table-column>
            <el-table-column prop="address" label="工作地点" ></el-table-column>
          </el-table>
          <div class="relation">
            <div class="relation-box">
              <div class="relation-box-left">
                <img style="width:0.46rem;height:0.36rem" src="../../assets/invite/组 130.png" alt />
              </div>
              <div class="relation-box-right">
                <span>投递邮箱：</span>
                <span>123456789@163.com</span>
              </div>
            </div>
            <div class="relation-box">
              <div class="relation-box-left">
                <img style="width:0.36rem;height:0.51rem" src="../../assets/invite/组 133.png" alt />
              </div>
              <div class="relation-box-right">
                <span>公司地址：</span>
                <span>成都市武侯区中海国际A座1303</span>
              </div>
            </div>
            <div class="relation-box">
              <div class="relation-box-left">
                <img style="width:0.46rem;height:0.46rem" src="../../assets/invite/组 134.png" alt />
              </div>
              <div class="relation-box-right">
                <span>联系电话：</span>
                <span>028-85179775</span>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 底部 -->
  </div>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      activeName: "first",
      tableData: [
        {
          date: "人事专员",
          name: "本科学历",
          address: "成都"
        },
        {
          date: "人事专员",
          name: "本科学历",
          address: "成都"
        },
        {
          date: "人事专员",
          name: "本科学历",
          address: "成都"
        }
      ]
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClick2() {
      alert("button click");
    }
  }
};
</script>
<style scoped lang='less'>
/deep/.el-table--border::after, .el-table--group::after, .el-table::before {
    content: '';
    position: absolute;
    background-color: #ff7200; 
    z-index: 1;
}
.society {
  margin-top: 0.6rem;
  display: flex;
  .society-left{
    display: flex;
    flex-direction: column;
    width: 3.08rem;
    background-color: #FF7200;
    .society-left-box{
      width: 3.08rem;
      height: 0.88rem;
      color: #ffffff;
      font-size: 0.28rem;
      font-weight: bold;
      line-height: 0.88rem;
      text-align: center;
    }
  }
  .society-right{
    flex: 1;
    .society-right-box{
      border-bottom: 0.02rem solid #f2f2f2;
      height: 0.86rem;
      line-height: 0.86rem;
      width: 100%;
      display: flex;
      align-items: center;
      div:first-child{
        width: 0.87rem;
        height: 0.49rem;
        background-color: red;
        font-size:0.28rem;
        color:#ffffff;
        line-height: 0.49rem;
        text-align: center;
        margin-left: 0.33rem;
      }
      div:last-child{
        color: #333333;
        font-size: 0.24rem;
        span{
          margin-left: 0.5rem;
        }
      }
    }
  }
}
.relation {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  .relation-box {
    width: 4.6rem;
    height: 1.58rem;
    border: 1px solid #afafaf;
    border-radius: 0.1rem;
    display: flex;
    align-items: center;
    .relation-box-left {
      margin-left: 0.2rem;
      width: 0.78rem;
      height: 0.78rem;
      background: #ff7200;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 0.36rem;
        height: 0.4rem;
      }
    }
    .relation-box-right {
      line-height: 0.35rem;
      margin-left: 0.14rem;
      display: flex;
      flex-direction: column;
      span:first-child {
        font-size: 0.22rem;
        color: #333333;
      }
      span:last-child {
        font-size: 0.22rem;
        color: #ff7200;
      }
    }
  }
}
/deep/.el-table--border::after,
.el-table--group[data-v-d98b807a]::after,
.el-table[data-v-d98b807a]::before {
  // border: 1px solid #ff7200;
}
/deep/.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
/deep/.el-table .cell {
  line-height: 0.24rem;
}
/deep/.el-table thead {
  font-size: 0.24rem;
  height: 0.82rem;
}
/deep/.el-table--border::after,
.el-table--group::after,
.el-table::before {
  content: "";
  position: absolute;
  /* background-color: #EBEEF5; */
  z-index: 1;
}
/deep/.el-table {
  color: #333333;
  font-size: 0.24rem;
  margin-top: 0.8rem;
  margin-left: 0.14rem;
  margin-bottom: 0.8rem;
}
/deep/.el-table .el-table__cell {
  border: 0.01rem solid #ff7200;
  text-align: center;
  padding: 0.18rem 0;
}
/deep/.el-button--primary:focus,
.el-button--primary:hover {
  background-color: #ffffff;
  border: 0.01rem solid #707070;
}
/deep/.el-icon-caret-bottom {
  margin-left: 1.78rem;
}
/deep/.el-button--primary {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border: 1px solid #707070;
  color: #333333 !important;
  font-size: 0.26rem;
  display: flex;
  align-items: center;
}
.el-dropdown {
  vertical-align: top;
  width: 3.5rem;
  height: 0.82rem;
  line-height: 0.82rem;
  margin-left: 0.2rem;
}
.el-dropdown + .el-dropdown {
  margin-left: 0.15rem;
}
.el-icon-arrow-down {
  font-size: 0.12rem;
}

.post {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 0.68rem;
}
.about {
  line-height: 0;
}
.interview {
  display: flex;
  justify-content: space-between;
  margin-top: 1.12rem;
  .box {
    width: 2.37rem;
    height: 3.41rem;
    background: #ff7200;
    border-radius: 0.2rem;
    color: #ffffff;
    padding: 0 0.49rem;
    .top {
      height: 1.7rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      img {
        width: 1rem;
        height: 1rem;
        margin-bottom: 0.26rem;
      }
      span {
        font-size: 0.26rem;
        font-weight: bold;
      }
    }
    .bottom {
      span:first-child {
        width: 0.08rem;
        height: 0.08rem;
        border-radius: 50%;
        background-color: #ffffff;
        display: inline-block;
      }
      span:last-child {
        font-size: 0.16rem;
        margin-left: 0.1rem;
      }
    }
  }
}
.relation-img {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 0.72rem;
  margin-top: 1rem;
  img {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.content /deep/.el-tabs__active-bar {
  width: 0 !important;
}
/deep/.el-tabs__item.is-active {
  color: #ffffff !important;
  font-weight: normal;
  width: 3.18rem;
  height: 0.88rem;
  background-color: #ff7200;
  line-height: 0.88rem;
  text-align: center;
  border-radius: 0.2rem;
}
/deep/.el-tabs__item {
  color: #ff7200;
  font-weight: normal;
  width: 3.18rem;
  height: 0.88rem;
  background-color: #ffffff;
  border: 1px solid #ff7200;
  line-height: 0.88rem;
  text-align: center;
  border-radius: 0.2rem;
  margin-right: 0.7rem;
}
.content {
  padding: 0.36rem 2rem 0;
}
</style>